<template>
<div class="app-container">
 <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="序号">
        <el-input v-model="form.index" style="width:50%"></el-input>
      </el-form-item>

      <el-form-item label="名称">
        <el-input v-model="form.name" style="width:50%"></el-input>
      </el-form-item>

      <el-form-item label="分类">
        <el-select v-model="form.serie" placeholder="请选择">
        <el-option v-for="item in classification" :key="item._id" :label="item.name"  :value="item._id">
        </el-option>
      </el-select>
      </el-form-item>

      <el-form-item label="价格">
        <el-input v-model="form.price" style="width:50%"></el-input>
      </el-form-item>

      <el-form-item label="是否上架">
          <el-switch
              v-model="form.status"
              active-color="#13ce66"
              inactive-color="#ff4949">
          </el-switch>
      </el-form-item>

   <el-form-item label="图片url">
    <el-input v-model="form.img" style="width:50%"></el-input>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
  </el-form-item>
</el-form>
</div>
</template>

<script>
import { dishadd, dishlist} from '@/api/dish'
import { listserie} from '@/api/serie'
export default {
data(){
      return {
        form: {
          index:'',
          name: '',
          serie: '',
         price: '',
         status:true,
         img: ''
        },
        //这是分类下拉菜单的值
        classification:[]
      }
    },
    mounted(){
      //把获取到的值分类
    listserie().then(res=>{
     this.classification = res.data
    })
      

    },
    methods: {
      onSubmit() {
        console.log(this.form);
        //判断如果序号，名称，分类，价格没有填写的话就提示
      if(this.form.index&&this.form.name&&this.form.serie&&this.form.price){
        //如果有值就调用此接口
        dishadd(this.form).then(res=>{
             this.$message({   type: 'success',   message: '添加成功!' });
             //添加成功后提示
             //把标签为空
             this.form = {}
        })
      }else{
        this.$message.error('缺少必填项')

      }
      }
    }
}
</script>

<style scoped>
.el-button{
  margin-left: 100px;
}

</style>